<template>
  <div id="client-manage">
    <ContentField>
      <template v-slot:content-field-card-name>客户信息管理</template>
      <template v-slot:content-field-card-button></template>
      <template v-slot:content-field-card-body>
        <div id="client-manage-body" style="position: relative">
          <el-table
            :data="client_list"
            border
            height="500"
            style="width: 100%; position: absolute"
          >
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="birthday" label="生日" />
            <el-table-column prop="phone" label="电话" />
          </el-table>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { computed } from "vue";

export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();
    store.dispatch("get_all_client_info", {
      token: store.state.user.jwt_token,
    });
    let client_list = computed(() => {
      return store.state.client.client_list;
    });
    return {
      store,
      client_list,
    };
  },
};
</script>

<style scoped></style>
